<template>
	<div>
		<el-button @click="addDept">添加</el-button>

		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="部门名称" prop="dname">
						<el-input v-model="form.dname"></el-input>
					</el-form-item>
					<el-form-item label="地址" prop="loc">
						<el-select v-model="form.loc" placeholder="请选择地址">
							<el-option label="北京" value="北京"></el-option>
							<el-option label="上海" value="上海"></el-option>
							<el-option label="郑州" value="郑州"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>



			</span>
			<!-- <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span> -->
		</el-dialog>

		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column prop="deptno" label="编号">
			</el-table-column>
			<el-table-column prop="dname" label="名称">
			</el-table-column>
			<el-table-column prop="loc" label="地址">
			</el-table-column>
		</el-table>
	</div>
</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	import qs from 'qs'
	export default {
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 === 0) {
					return 'warning-row';
				} else if (rowIndex % 2 === 1) {
					return 'success-row';
				}
				return '';
			},
			queryData() {
				//向后台发出请求，返回数据
				this.$axios.get("cha").then(r => {
					this.tableData = r.data.t;
					// alert(JSON.stringify(this.tableData))
					// var aa=JSON.stringify(this.tableData)

				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			addDept() {
				this.dialogVisible = true;
			},
			onSubmit(formName) {
				// alert("提交");
				//发出请求
				// this.$axios.post("add2",qs.stringify(this.form)).then(r=>{
				// 	 this.$message({
				// 		 showClose:true,
				// 	          message: r.data.msg,
				// 	          type: 'success'
				// 	        });


				// });
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post("add2", qs.stringify(this.form)).then(r => {
							this.$message({
								showClose: true,
								message: r.data.msg,
								type: 'success'
							})
						});
					} else {
						// console.log('error submit!!');
						return false;
					}
					this.dialogVisible = false;

				});
				//刷新数据
				this.queryData();
			}
		},
		data() {
			return {
				tableData: [],
				dialogVisible: false,
				form: {
					dname: '',
					loc: ''
				},
				rules: {
					dname: [{
						required: true,
						message: '请输入部门名称',
						trigger: 'change'
					}],
					loc: [{
						required: true,
						message: '请输入城市',
						trigger: 'change'
					}]

				}
			}
		},
		created() {
			this.queryData();
		}
	}
</script>
<style>
</style>
